<template>
  <view class="contenter">
    <view class="u-flex headMian" >
      <view class="headTime" @click="tabChangeIndex(index)" :class="{'active':index == tabIndex}" v-for="(data,index) in time">{{data}}</view>
    </view>
    <scroll-view scroll-y style="height: 1040rpx;width: 100%;" @scrolltolower="onreachBottom">
      <view class="item flex" v-for="(data,index) in 5">
        <view>
          <item-image :type="'1'" :img="'/static/tixian.png'" :size="146"  class="u-margin-right-8"  :fade="false"/>
        </view>
        <view class="nei">
          <view class=" flex flex_bt">
            <view class="name">哈里博特</view>
            <view>好评率：97%</view>
          </view>
          <view class="flex_bt flex">
            <view>
              <view class="u-pd-b-5">已服务：88单</view>
              <view>销售额：1280.00</view>
            </view>
            <view class="detail   " @click="userDetail">查看详情</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      time:['好评优先','订单优先','销售额优先'],
      tabIndex:0,
    }
  },
  methods:{
    //跳转技师详情
    userDetail(){
      this.$u.route({
        url:'/pagesA/StoreTechnician/detail',
        params: {
          id: 5
        }
      })
    },
    tabChangeIndex(index){
      this.tabIndex = index
    },
    onreachBottom(){},
  }
}
</script>

<style scoped lang="scss">
.headMian{
  background: white;
  padding: 0 32rpx;
  padding-top: 28rpx;
  padding-bottom: 38rpx;
  border: 2rpx solid $uni-border-color;
  .headTime{
    width: 218rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 8rpx;
    margin-right: 16rpx;
    color: $uni-text-color-inverse;
    font-size: 28rpx;
    border: 2rpx solid $uni-border-color;
    &:last-child{
      margin: 0;
    }
  }
  .active{
    background: $uni-color-primary;
    border: 2rpx solid $uni-color-primary;
    color: white;
  }
}
.item{
  background: #FFFFFF;
  box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
  border-radius: 12rpx;
  margin-top: 20rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  padding: 20rpx;

  .nei{
    margin-left: 24rpx;
    font-size: 24rpx;
    color: #555555;
    width: 100%;
    .name{
      font-size: 36rpx;
      color: #4B4B4B;
      margin-bottom: 20rpx;
      font-weight: 800;
    }
    .time{
      margin-top: 30rpx;
      margin-bottom: 10rpx;
    }
  }
  .detail{
    margin-left: 10rpx;
    width: 130rpx;
    height: 62rpx;
    background: #45806E;
    color: white;
    font-size: 24rpx;
    border-radius: 8rpx;
    text-align: center;
    line-height: 62rpx;
  }
}
</style>